<template>
  <el-dialog
    @close="handleClose"
    title=""
    :visible.sync="dialogVisible"
    width="50%">
      <div class="edit-config-inputs">
        <span>{{$t('common.timestamp')}}</span>
        <el-input @input="($event) => handleKeyUp('intervalTime', $event)" :min="0" v-model="currentData.intervalTime" type="number"></el-input>
        <span>{{$t('common.maxBorrow')}}</span>
        <el-input @input="($event) => handleKeyUp('productCount', $event)" :min="0" v-model="currentData.productCount" type="number"></el-input>
        <span>{{$t('common.newProduct')}}</span>
      </div>
      <el-button type="primary" @click="handleConfirm">{{$t('common.confirmOk')}}</el-button>
      <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        dialogVisible: true,
        currentData: {}
      }
    },
    watch: {
      data: {
        handler(newVal) {
          this.currentData = Object.assign({}, newVal)
        },
        immediate: true
      }
    },
    methods: {
      handleKeyUp (key, value) {
        this.currentData[key] = Number(value.replace(/\D+/, ''))
      },
      handleClose () {
        this.$emit('handleCloseEditConfig')
      },
      handleConfirm () {
        console.log(this.currentData)
        const { intervalTime, productCount } = this.currentData
        if (intervalTime === '' || productCount === '') {
          return
        }
        this.$emit('handleEditConfig', this.currentData)
      }
    }
  }
</script>

<style lang="scss">
.edit-config-inputs {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 50px;
  span {
    margin: 0 10px;
  }
}
</style>